<template>
    <div>
      <select name="province" @change="selectFun">
        <option v-for="(item,index) in allData" :value="index">{{item['name']}}</option>
      </select>
      <select name="city" @change="selectFun">
        <option v-for="(item,index) in cityData" :value="index">{{item['name']}}</option>
      </select>
    </div>
</template>

<script>
    export default {
        name: "wLinkage",
        props:{
            options:Array
        },
        data(){
            return {
                allData:this.options,
                cityData:this.options[0]["data"],
                provinceId:0,
                cityId:0,
                province:0,
                city:0
            }
        },
        mounted(){

        },
        methods:{
          selectFun(e){
              var name = e.target.getAttribute("name");
              var Index = e.target.value;
              switch (name) {
                case "province":
                  this.provinceId = Index;
                  this.cityData = this.allData[Index]['data'];
                  this.province = this.allData[Index]["id"];
                  this.city = 0;
                      break;
                case "city":
                  this.cityId = Index;
                  this.city = this.allData[this.provinceId]["data"][Index]['id'];
                      break;
              }
              this.$emit("selectMap",{province:this.province,city:this.city});
          }
        }
    }
</script>

<style scoped>
  select{
    width:132px;
    height:30px;
    border:1px solid #ddd;
    outline: none;
    margin-right:35px;
    width:135px;
    color:#666;
    font-size:12px;
    text-indent:10px;
  }
</style>
